<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
		<!-- <script src="./webrtc-vue/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="./ZLMRTCClient.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div style="text-align: center">
				<div>
					<video ref="video" controls autoplay style="text-align: left">
						Your browser is too old which doesn't support HTML5 video.
					</video>

					<video ref="selfVideo" controls autoplay style="text-align: right">
						Your browser is too old which doesn't support HTML5 video.
					</video>
				</div>

				<div>
					<p>
						<label for="streamUrl">url:</label>
						<input type="text" style="co" ref="url" v-model="streamUrl" />
					</p>

					<p>
						<label for="simulcast">simulcast:</label>
						<input type="checkbox" ref="simulcast" />
					</p>
					<p>
						<label for="useCamera">useCamera:</label>
						<input type="checkbox" checked="checked" ref="useCamera" />
					</p>

					<p>
						<label for="audioEnable">audioEnable:</label>
						<input type="checkbox" ref="audioEnable" checked="checked" />
					</p>

					<p>
						<label for="videoEnable">videoEnable:</label>
						<input type="checkbox" ref="videoEnable" checked="checked" />
					</p>

					<p>
						<label for="method">method(play or push or echo):</label>
						<input type="radio" name="method" @click="radioChange('echo')" value="echo" />echo
						<input type="radio" name="method" @click="radioChange('push')" value="push" />push
						<input type="radio" name="method" @click="radioChange('play')" value="play"
							checked="true" />play
					</p>
					<p>
						<label for="resolution">resolution:</label>
						<!-- <select id="resolution" :value="resolution"></select> -->
						<select @change="changeResolution">
							<option :value="resolution.value" v-for="resolution in resolutions">
								{{ resolution.text }}
							</option>
						</select>
					</p>
					<p>
						<label for="datachannel">datachannel:</label>
						<input ref="datachannel" name="datachannel" type="checkbox" value="0" />
					</p>
					<button @click="startVideo">开始(start)</button>
					<button @click="stopVideo">停止(stop)</button>

					<p>
						<label for="msgsend">msgsend:</label>
						<input type="text" ref="msgsend" value="hello word !" />
					</p>
					<p>
						<label for="msgrecv">msgrecv:</label>
						<input type="text" ref="msgrecv" disabled />
					</p>
					<button @click="send">发送(send by datachannel)</button>
					<button @click="close">关闭(close datachannel)</button>
				</div>
			</div>
		</div>
	</body>
	<script>
		const App = {
			data() {
				return {
					streamUrl: document.location.protocol + "//" + window.location.host +
						"/index/api/webrtc?app=live&stream=test&type=play",
					player: null,
					recvOnly: true,
					resolutions: [],
					resolution: '',
				}
			},
			mounted() {
				let ishttps = "https:" == document.location.protocol ? true : false;
				let isLocal = "file:" == document.location.protocol ? true : false;
				if (!ishttps && !isLocal) {
	
					alert(
					  "本demo需要在https的网站访问 ,如果你要推流的话(this demo must access in site of https if you want push stream)"
					);
				}
				if (isLocal) {
					streamUrl.value =
						"http://127.0.0.1" + "/index/api/webrtc?app=live&stream=test&type=play";
				}
				ZLMRTCClient.GetAllScanResolution().forEach((r, i) => {
					let text = r.label + "(" + r.width + "x" + r.height + ")";
					this.resolutions.push({
						text: text,
						value: r
					});
				});

				this.resolution = this.resolutions[0].text;
			},
			methods: {
				//点击radio事件
				radioChange(value) {
					let url = new URL(this.streamUrl);
					console.log(value);
					url.searchParams.set("type", value);
					this.streamUrl = url;
					if (value == "play") {
						this.recvOnly = true;
					} else if (value == "echo") {
						this.recvOnly = false;
					} else {
						this.recvOnly = false;
					}
				},
				changeResolution(e) {
					this.resolution = e.target.options[e.target.selectedIndex].text;
				},
				start_play() {
					let res = this.resolution.match(/\d+/g);
					let h = parseInt(res.pop());
					let w = parseInt(res.pop());

					this.player = new ZLMRTCClient.Endpoint({
						element: this.$refs.video, // video 标签
						debug: true, // 是否打印日志
						zlmsdpUrl: this.streamUrl, //流地址
						simulcast: this.$refs.simulcast.checked,
						useCamera: this.$refs.useCamera.checked,
						audioEnable: this.$refs.audioEnable.checked,
						videoEnable: this.$refs.videoEnable.checked,
						recvOnly: this.recvOnly,
						resolution: {
							w: w,
							h: h
						},
						usedatachannel: this.$refs.datachannel.checked,
					});

					this.player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function(e) {
						// ICE 协商出错
						console.log("ICE 协商出错");
					});

					this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function(e) {
						//获取到了远端流，可以播放
						console.log("播放成功", e.streams);
					});

					this.player.on(
						ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
						function(e) {
							// offer anwser 交换失败
							console.log("offer anwser 交换失败", e);
							stop();
						}
					);

					this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function(s) {
						// 获取到了本地流

						this.$refs.selfVideo.srcObject = s;
						this.$refs.selfVideo.muted = true;
						//console.log('offer anwser 交换失败',e)
					});

					this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function(s) {
						// 获取本地流失败
						console.log("获取本地流失败");
					});

					this.player.on(
						ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,
						function(state) {
							// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
							console.log("当前状态==>", state);
						}
					);

					this.player.on(
						ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,
						function(event) {
							console.log("rtc datachannel 打开 :", event);
						}
					);

					this.player.on(
						ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,
						function(event) {
							console.log("rtc datachannel 消息 :", event.data);
							this.$refs.msgrecv.value = event.data;
						}
					);
					this.player.on(
						ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,
						function(event) {
							console.log("rtc datachannel 错误 :", event);
						}
					);
					this.player.on(
						ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,
						function(event) {
							console.log("rtc datachannel 关闭 :", event);
						}
					);
				},
				startVideo() {
					console.log("开始");
					this.stopVideo();
					let res = this.resolution.match(/\d+/g);
					let h = parseInt(res.pop());
					let w = parseInt(res.pop());
					if (this.$refs.useCamera.checked && !this.recvOnly) {
						ZLMRTCClient.isSupportResolution(w, h)
							.then((e) => {
								this.start_play();
							})
							.catch((e) => {
								alert("not support resolution");
							});
					} else {
						this.start_play();
					}

				},
				stopVideo() {
					console.log("停止");
					if (this.player) {
						this.player.close();
						this.player = null;
						var remote = this.$refs.video;
						if (remote) {
							remote.srcObject = null;
							remote.load();
						}
						var local = this.$refs.selfVideo;
						local.srcObject = null;
						local.load();
					}
				},
				send() {
					if (this.player) {
						//send msg refernece https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
						this.player.sendMsg(this.$refs.msgsend.value);
					}
				},
				close() {
					if (this.player) {
						this.player.closeDataChannel();
					}
				}
			}
		};
		

		Vue.createApp(App).mount('#app');
	</script>
</html>